import React, { Component } from 'react'
import {Button} from "antd";
import Son from "./Son";

export default class index extends Component {
  constructor(){
    super();
    this.state={
      msg:"hello"
    }
    console.log("constructor");
  }

  // 渲染前
  // 不建议使用
  componentWillMount(){
    console.log("componentWillMount");
  }

// 渲染后
  componentDidMount(){
    console.log("componentDidMount");
  }

  // 组件应该更新吗？
  shouldComponentUpdate(nextProps,nextState){
    console.log("shouldComponentUpdate");
    console.log("nextState",nextState);
    return true;
    // return false;
  }

  // 更新前
  componentWillUpdate(){
    console.log("componentWillUpdate");
  }

  // 更新后
  componentDidUpdate(){
    console.log("componentDidUpdate"); 
  }

  changeMsg=()=>{
    this.setState({
      msg:this.state.msg+"1"
    })
  }

  // 渲染
  render() {
    console.log("render");
    return (
      <>
      <div>生命周期</div>
      <Button onClick={this.changeMsg}>修改msg</Button>
      <hr/>
      <Son></Son>

      </>
    )
  }
}
